<template>
	<div>
		<div id="eg">
			<StepContainer v-model="current" :icon-size="iconSize+'px'">
				<StepContainerItem name="步骤一" icon="logo-angular">内容1</StepContainerItem>
				<StepContainerItem name="步骤二" icon="logo-sass">内容2</StepContainerItem>
				<StepContainerItem name="步骤三" icon="logo-xbox">内容3</StepContainerItem>
			</StepContainer>
		</div>
		<ApiTable :data="data" :bind="this"/>
		<CodeShow :code="code"/>
	</div>
</template>

<script>
	import ApiTable from './tools/ApiTable';
	import StepContainer from '@/components/StepContainer';
	import StepContainerItem from '@/components/StepContainerItem';
	export default{
		name:'StepContainerEG',
		components:{
			ApiTable,
			StepContainer,
			StepContainerItem
		},
		data(){
			return {
				current:0,
				iconSize:14,
				data:[
					{
						title:'属性',
						value:[
							{name:'v-model',info:'当前步骤索引',type:'Number',def:'0',set:{type:'number',bind:'current'}},
							{name:'font-class',info:'图标默认应用的class',type:'String'},
							{name:'icon-size',info:'图标默认大小',type:'String',def:'"14px"',set:{type:'number',bind:'iconSize'}}
						]
					},{
						title:'StepContainerItem属性',
						type:true,
						value:[
							{name:'name',info:'步骤名称',type:'String'},
							{name:'icon',info:'当指定了font-class属性则为html内容,否则为iview的Icon组件的type属性',type:'String'},
							{name:'font-class',info:'图标应用的class',type:'String'},
							{name:'icon-size',info:'图标大小',type:'String'}
						]
					}
				]
			};
		},
		computed:{
			code(){
				return `
<template>
	<StepContainer v-model="current" :icon-size="iconSize+'px'">
		<StepContainerItem name="步骤一" icon="logo-angular">内容1</StepContainerItem>
		<StepContainerItem name="步骤二" icon="logo-sass">内容2</StepContainerItem>
		<StepContainerItem name="步骤三" icon="logo-xbox">内容3</StepContainerItem>
	</StepContainer>
</template>
<script>
	export default{
		data:function(){
			return {
				current:${this.current},
				iconSize:${this.iconSize},
			};
		}
	};
</${'script'}>
`;
			}
		}
	};
</script>

<style lang="scss" scoped>
	#eg{
		width:900px;
		margin:20px;
		>.bear-StepContainer{
			height:300px;
		}
	}
</style>
